<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>MVVM模型</title>
  <script type="text/javascript" src="../../static/lib/vue/vue.js"></script>
</head>
<body>
<!--
    MVVM的理解：
            1. M：模型(Model) ：对应data中的数据
            2. V：视图(View) ：模板代码
            3. VM：视图模型(ViewModel) ： Vue实例对象
-->
<!-- 准备好一个容器-->
<div id="root">
  <h2>Hello，{{msg}}</h2>
  <h2>地址是：{{address}}</h2>
</div>

<script type="text/javascript" >
  //创建一个VUe实例对象
  const vm = new Vue({
    el:'#root',
    data:{
      msg:'尚硅谷',
      address:'宏福科技园综合楼'
    }
  })

  //观察发现：通过vm能看到data中的属性（注意不是看到data）
  setTimeout(()=>{
    console.log(vm.msg) //通过vm可以读取data中的数据
    vm.msg = 'atguigu' //通过vm可以修改data中的数据，且修改后页面会自动更新
  },1000)

</script>
</body>
</html>